<template>
    <div class="job_add">
        <h1>修改职位</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="标签" prop="selArr">
                <el-select @change="cage" v-model="ruleForm.selArr" multiple placeholder="请选择标签" style="width=100px">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="薪资" prop="price">
                <el-input v-model="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="人数" prop="people">
                <el-input v-model="ruleForm.people"></el-input>
            </el-form-item>
           <el-form-item label="学历" prop="education">
                <el-input v-model="ruleForm.education"></el-input>
            </el-form-item>
            <el-form-item label="经验" prop="experience">
                <el-input v-model="ruleForm.experience"></el-input>
            </el-form-item>
           <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="contact">
                <el-input v-model="ruleForm.contact"></el-input>
            </el-form-item>
            <el-form-item label="职位描述" prop="format_describe">
                <el-input type="textarea" v-model="ruleForm.format_describe"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import config from "@/assets/js/config.js"
  export default {
    data() {
      return {
        ruleForm: {
            name: '',
            price:'',
            people: '',
            education: '',
            experience: '',
            address: '',
            contact: '',
            format_describe:'',
            selArr: []
        },
        options: [{
          value: '选项1',
          label: '五险一金'
        }, {
          value: '选项2',
          label: '包吃'
        }, {
          value: '选项3',
          label: '周末双休'
        }, {
          value: '选项4',
          label: '年底双薪'
        }, {
          value: '选项5',
          label: '房补餐补'
        }],
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          selArr: [
            { required: true, message: '请选择标签', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请选择薪资', trigger: 'blur' }
          ],
          people: [
            { required: true, message: '请选择人数', trigger: 'blur' }
          ],
          education: [
            { required: true, message: '请填写学历', trigger: 'blur' }
          ],
          experience: [
            { required: true, message: 'experience is required', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请填写地址', trigger: 'blur' }
          ],
          contact: [
            { required: true, message: '请填写联系方式', trigger: 'blur' }
          ],
          format_describe: [
            { required: true, message: '请填写描述', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      cage(e){
        console.log(e,this.ruleForm.selArr);
      },
      submitForm(formName) {
        console.log(this.ruleForm.selArr)
        var str = this.ruleForm.selArr.join(",");
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            this.$submit.post(config.jobsAdd,{
              address: this.ruleForm.address,
              contact: this.ruleForm.contact,
              education: this.ruleForm.education,
              experience: this.ruleForm.experience,
              format_describe: this.ruleForm.format_describe,
              name: this.ruleForm.name,
              people: this.ruleForm.people,
              price: this.ruleForm.price,
              property_string: str
            }).then((res) => {
              console.log("上传成功",res)
              this.$router.push({
                name:"takeJob"
              });
              this.ruleForm.address = '',
              this.ruleForm.contact = '',
              this.ruleForm.education = '',
              this.ruleForm.experience = '',
              this.ruleForm.format_describe = '',
              this.ruleForm.name = '',
              this.ruleForm.people = '',
              this.ruleForm.price = '',
              this.ruleForm.selArr = '',
              this.$require.get(config.jobsList,{
                params: {
                  page:this.page
                }
              }).then((result) => {
                console.log("成功后数据",result)
              })
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="scss" scoped>
    .job_add{
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20%;
        h1{
            margin-bottom: 20px;
        }
        input{
            width: 70%!important;
        }
    }
</style>
